<template>
    <div>
        <h1>员工信息显示</h1>
        员工姓名：
        <input type="text" v-model="can.name">
        类型：
        <select v-model="can.tid">
            <option value="0">请选择</option>
             <option v-for="a in Bang" :value="a.userTypeId">{{ a.userTypeName }}</option>
        </select>

        <input type="button" value="查询" @click="Show">
        <table class="table">
            <thead>
                <tr>
                    <th><input type="checkbox" v-model="chks" @change="Selectchks"></th>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>角色</th>
                    <th>手机号</th>
                    <th>更新人</th>
                    <th>创建时间</th>
                    <th>员工状态</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="a in dataa">
                    <td><input type="checkbox" v-model="idarry" :value="a.id"></td>
                    <td>{{ a.id }}</td>
                    <td>{{ a.userName }}</td>
                    <td>{{ a.userTypeName }}</td>
                    <td>{{ a.userPhone }}</td>
                    <td>{{ a.userName }}</td>
                    <td>{{ a.userDateTime}}</td>
                    <td>{{ a.userStart==true?"启用":"禁用" }}</td>
                    <td><input type="button" value="逻辑删除" @click="Delete(a.id)"></td>
                </tr>
            </tbody>
        </table>
        共{{dto.count}}数，每页{{can.pagesize}}条，共{{dto.pageList}}/{{can.pageindex}}页
        <input type="button" value="首页" @click="FY(1)">
        <input type="button" value="上一页" @click="FY(can.pageindex-1)">
        <input type="button" v-for="a in dto.pageList" :value="a" @click="FY(a)">
        <input type="button" value="下一页" @click="FY(can.pageindex+1)">
        <input type="button" value="尾页" @click="FY(dto.pageList)">
        <td><input type="button" value="批量修改状态" @click="PLUpdate"></td>
    </div>
</template>
<script setup lang="ts">
import axios from 'axios';
import {ref,onMounted} from 'vue';


onMounted(()=>{
    Show()
    Bangg()
})

const Delete=(mid:number)=>{
    alert("确认删除吗");
    axios.get("/api/User/Delete",{params:{id:mid}}).then(res=>{
        if(res.data>0)
        {
        alert("逻辑删除成功");
        Show()
        }
        else{
            alert("逻辑删除失败");
        Show() 
        }
    })
}

const PLUpdate=()=>{
    axios.get("/api/User/PLUpdate",{params:{idstring:idarry.value.toString()}}).then(res=>{
        if(res.data>0)
    {
        alert("批量修改状态成功");
        Show()
    }
    else{
        alert("批量修改状态失败");
        Show()
    }
    })
}

var chks = ref(false)
var idarry = ref([])

const Selectchks=()=>{
if(chks.value)
{
    idarry.value = dataa.value.map((i:any)=>{
        return i.id
    })
}
else{
        idarry.value=[];
}
}
//翻页
const FY=(a:any)=>{
    if(a>=1 && a<=dto.value.pageList)
    {
        can.value.pageindex=a;
        Show()
    }
}
//定义显示数组
var dataa = ref({
      id: 0,
      userName: "",
      userTypeId: 0,
      userPhone: "",
      userDateTime: "",
      userStart: true,
      isDelete: true,
      userTypeName: ""
    })
//定义下拉框数组
var Bang=ref({
  userTypeId: 0,
  userTypeName: ""
})

const Bangg=()=>{
    axios.get("/api/UserType/GetAll").then(res=>{
        Bang.value =res.data
    })
}
var can =ref({
    name:'',
    tid:0,
    pageindex:1,
   pagesize:2, 
})
var dto = ref({
    count:0,
    pageList:0,
})

//调用显示方法
const Show=()=>{
    axios.get("/api/User/Show",{params:can.value}).then(res=>{
        dataa.value =res.data.pageList;
        dto.value.count= res.data.count;
        dto.value.pageList=Math.ceil( dto.value.count/can.value.pagesize);
    })
}
</script>
<style scoped>
</style>